import React from 'react'
import { error, info, Link, Toast, Input, Checkbox } from '../ui-components'
import { Button } from 'sq-ui';
import { connect } from 'react-redux'
import cookie from 'component-cookie'
import store from 'yields-store'
import rule from '../libs/rule'
import validate from '../libs/validate'
import style from './style'

@connect((auth) => ({auth}))
class Activate extends React.Component {

  state = {
    email: '',
    step: 1
  }

  submit() {
    if (this.validate()) return
    info('发送中...', true)
    this.props.initPasswordEmail(this.state.email, () => {
      info();
      this.setState({
        step: 2
      })
    })
  }

  validate() {
    return this.props.validate(['email'], this)
  }

  handleBlur() {
    if (!this.state.email.trim()) return
    return this.props.validate(['email'], this)
  }

	render() {
    if (this.state.step == 2) {
      return (
        <div className={style['after-find-password']}>
          <h2>发送成功</h2>
          <p>恭喜，激活邮件发送成功，请到您的企业邮箱进行查收</p>
        </div>
      )
    }
		return (
      <div>
        <div className={style.form}>
          <h2 className={style.title}>激活帐号</h2>
          <div className={style.input}>
            <input autoFocus onBlur={::this.handleBlur} ref="email" value={this.state.email} onChange={e => this.setState({ email: e.target.value.trim() })} autoComplete="off" type="text" placeholder="填写企业邮箱"/>
          </div>
          <Button blue onClick={::this.submit} className={style.button} label="发送激活邮件" />
          <Link label="返回登录" _ className={style['return-login']} to='#/login'/>
        </div>
      </div>
		)
	}
}

export default Activate
